<template>
    <div class='right'>
        <div class='right-title'>
            <span class='title'>指标看板</span>
               
            <div class='rightControl'>
                <el-button type="primary" v-if="!editStatus">
                <span title="编辑" @click="edits()" style="cursor: pointer">
                    <i class='el-icon-edit'></i>编辑
                </span>
                </el-button>

                <el-dropdown @command="handleCommand" v-show="saveStatus" style="cursor:pointer">
                    <el-button type="primary">
                    <span class="el-dropdown-link">
                      增加<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="汽车销售量">汽车销售量</el-dropdown-item>
                        <el-dropdown-item command="销售额">销售额</el-dropdown-item>
                        <el-dropdown-item command="平均价格">平均价格</el-dropdown-item>
                        <el-dropdown-item command="客户数">客户数</el-dropdown-item>
                        <el-dropdown-item command="活跃客户数">活跃客户数</el-dropdown-item>
                        <el-dropdown-item command="平均订单金额">平均订单金额</el-dropdown-item>
                        <el-dropdown-item command="平均下单sku数">平均下单sku数</el-dropdown-item>
                        <el-dropdown-item command="经销商占有率">经销商占有率</el-dropdown-item>

                    </el-dropdown-menu>
                  </el-dropdown>
                  <el-button v-if="saveStatus" type="primary" class="saveBtn">
                      <span title="保存" @click="save()" style="cursor: pointer">
                          <i class='iconfont icons-save'></i>
                          保存
                      </span>
                  </el-button>
            </div>
        </div>
        <div class='right-content' style='width: calc(100%);height: calc(100%);left: calc(0%);top:calc(0%)'>
            <div class='showState1' v-show='viewList.length === 0 && showState'>
                <h4>列表组为空</h4>
            </div>
            <view-list v-if="viewList.length != 0"></view-list>
        </div>
    </div>
</template>

<script>
import viewList from "./viewList.vue";
import { mapState, mapActions } from "vuex";
import echarts from "echarts";

export default {
  props: [],
  data() {
    return {
      showSave: false,
      // showEdit: true,
      showAddStatus: false,
      column: 24,
      row: 12,
      calcX: 100 / 24,
      calcY: 100 / 12,
      selectedText: '',
      index: 0
    };
  },
  components: {
    // preview: preview
  },
  methods: {
    handleCommand(command) {
        this.addItem(command)
      },
    addItem: function(command) {
      var _this = this;
      var item = {
        x: 0,
        y: 0,
        w: 2,
        h: 2,
        i: this.index + "",
        text: command,
        id: this.uid(),
        bgColor: 'pink'
      };
      _this.index++;
      _this.$store.commit('addView', item);
 
      _this.$nextTick(function(){
        let ele = document.querySelector('[data-id="'+ item.id +'"]');
        let option = {};
      for(let key in this.echartsData) {
        if(this.echartsData[key].name == command) {
          option = this.echartsData[key]
        }
      }
      let myCharts = echarts.init(ele);
          myCharts.setOption(option);
          myCharts.resize()

      _this.$store.commit('addEchartsObj', {chart: myCharts, id: item.id});
     
      })
      
    },
    selectChange(value, id) {
      let ele = document.querySelector(
        '[data-uid="' + this.editIndexId + '"] .list-content'
      );
      if (ele == null) {
        alert("没有选择添加对象");
      } else {
        let myCharts = echarts.init(ele);
        let option = this.echartsData[value];
        myCharts.setOption(option);
      }
    },
    edits() {
      this.$store.commit('changeSave')
      this.$store.commit('changeEdit')
    },
    save(){
      this.$store.commit('changeSave')
      this.$store.commit('changeEdit')
      this.showAddStatus = false;
    },
    uid: function() {
      let s = [];
      let hexDigits = "abcdef0123456789";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "6";
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
      s[8] = s[13] = s[18] = s[23] = "-";

      return s.join("");
    },
    loadingData() {
      // this.$store.dispatch("getKpiTreeData", "../../static/test.json");
      // alert('dddd')
    }
  },
  computed: {
    localComputed() {
      /* ... */
    },
    // 使用对象展开运算符将此对象混入到外部对象中
    ...mapState({
      // ...
      //保存拖拽图形的信息列表
      viewList: state => state.viewList,
      // 阴影遮罩层的状态
      maskStyle: state => state.maskStyle,
      //   // 首次拖拽的state的状态
      showState: state => state.showState,
      //   // 保存请求的src
      viewIframeSrc: state => state.viewIframeSrc,
      borderActive: state => state.borderActive,
      editIndexId: state => state.editIndexId,
      echartsData: state => state.echartsData,
      editStatus: state => state.editStatus,
      saveStatus: state => state.saveStatus,
      echartsObj: state => state.echartsObj
    })
  },
  created() {},
  updated() {},
  mounted() {
    this.loadingData()
     this.index = this.viewList.length;
  },
  components: {
    "view-list": viewList
  }
};
</script>

<style>
.right {
  font-size: 0.2rem;
}
.right-title {
  text-align: left;
  font-size: 0.2rem;
}
.right-title .title {
  display: inline-block;
  cursor: pointer;
  font-size: 0.25rem;
}

.rightControl {
  display: inline-block;
  float: right;
  /* font-size: 0.2rem; */
}

.btn-icons {
  padding: 6px;
  font-weight: bold;
  padding: 6px 10px;
  transition: all 0.5s;
  border-radius: 2px;
}

.btn-icons:hover {
  transform: scale(1.2);
  background: #007cc2;
  color: #fff;
}

.btn-icons .iconfont {
  font-weight: bold;
  font-size: 18px;
}

</style>
